---
id: table
title: Table
sidebar_label: Table
---

The `Table` component is a flexible data container that allows you to display tabular data with various customization options. The table is composed of several subcomponents including `TableBody`, `TableHeader`, `TableRow`, and `TableCell` which offer distinct styling for different sections of the table.

## Usage

To use the `Table` component, you will generally use a combination of `Table`, `TableBody`, `TableHeader`, `TableRow`, and `TableCell` components.

import CodeSample from "../../src/CodeSample";
import CodeBlock from "@theme/CodeBlock";

## Basic Table

A basic table showcasing the default structure.

import TableBasicDemo from '../../samples/components/table/table_basic';
import TableBasicSource from '!!raw-loader!../../samples/components/table/table_basic';

<CodeSample>
    <TableBasicDemo/>
</CodeSample>

<CodeBlock language="tsx">{TableBasicSource}</CodeBlock>

## Table with Custom Styling

Apply any style or base attributes to the table components.

import TableCustomHeadingDemo from '../../samples/components/table/table_custom_headings';
import TableCustomHeadingSource from '!!raw-loader!../../samples/components/table/table_custom_headings';

<CodeSample>
    <TableCustomHeadingDemo/>
</CodeSample>

<CodeBlock language="tsx">{TableCustomHeadingSource}</CodeBlock>
